<template>
  <div class="app-container">
<!--轮播图界面-->
    <section class="banner fullscreen-top">
      <el-carousel 
        ref="carouselRef"
        height="100%" 
        autoplay 
        interval="5000" 
        indicator-position="bottom"
        arrow="hover"
        @mouseenter="pauseCarousel" 
        @mouseleave="startCarousel"
      >
        <el-carousel-item>
          <div class="carousel-item" :style="{ backgroundImage: 'url(https://oss.allintrip.cn/shanwentou/upfiles/onepage/202509127756770983.jpg?x-oss-process=image/quality,q_85/format,jpg)' }"></div>
        </el-carousel-item>
        <el-carousel-item>
          <div class="carousel-item" :style="{ backgroundImage: 'url(https://oss.allintrip.cn/shanwentou/upfiles/onepage/202410211744430256.jpg?x-oss-process=image/quality,q_85/format,jpg)' }"></div>
        </el-carousel-item>
        <el-carousel-item>
          <div class="carousel-item" :style="{ backgroundImage: 'url(https://oss.allintrip.cn/shanwentou/upfiles/onepage/20240493219698881.jpg?x-oss-process=image/quality,q_85/format,jpg)' }"></div>
        </el-carousel-item>
        <el-carousel-item>
          <div class="carousel-item" :style="{ backgroundImage: 'url(https://oss.allintrip.cn/shanwentou/upfiles/onepage/20240473832641532.jpg?x-oss-process=image/quality,q_85/format,jpg)' }"></div>
        </el-carousel-item>
      </el-carousel>

      <!--文字添加渐入动画-->
      <div class="banner-text" :class="{'banner-text-enter': isBannertextVisible}">
        <h1 class="title-animation">数见未来 未来可数</h1>
        <p class="subtitle-animation">大数据分析与应用技术国家工程实验室</p>
      </div>

      <!--滚动提示：增加弹跳动画-->
      <div class="scroll-down" @click="handleScroll">
        <el-icon class="scroll-icon bounce-animation"><CaretBottom /></el-icon>
        <span class="scroll-text">SCROLL</span>
      </div>
    </section>

  
    <main class="main-content">
      <!--实验室简介部分-->
      <section class="intro-section">
        <!-- 标题区域：红色竖条➕中英文标题 -->
        <div class="section-title">
          <div class="title-decoration">          
            <div class="red-bar"></div>
            <div class="decor-icon"></div>
          </div>
          <div class="title-text">
            <router-link to="/about/overview" class="link-title">
              <h2>关于我们</h2>
              <span class="en-title">ABOUT US</span>
            </router-link>
          </div>
        </div>
        
        <div class="intro-content">
          <!-- 左侧内容：文字+数据统计+按钮 -->
          <div class="left-intro" >
            <div class="intro-text" :class="{'fade-in': isIntroVisible}" style="transition-delay: 0.1s">
              <p>旅游服务智能辅助与质量评价文化和旅游部技术创新中心于2025年7月由文化和旅游部批准筹建，依托西安交通大学建设，以科技创新推动旅游高质量发展为核心定位，致力于解决全域旅游服务信息协同、旅游服务智能决策支持、服务质量动态监测优化等行业关键问题，开展旅游服务信息汇聚、旅游服务智能辅助、旅游服务质量监测?等研究方向的技术创新，实现旅游服务智能的工程化和产业化。</p>
            </div> 
            <!-- 数据统计模块：数字放大，布局分散 -->
            <div class="stats-row">
              <div class="stat-item card" :class="{'fade-in': isIntroVisible}" style="transition-delay: 0.3s">
                <div class="stat-number">2017</div>
                <div class="stat-label">实验室成立</div>
              </div>
              <div class="stat-item card" :class="{'fade-in': isIntroVisible}" style="transition-delay: 0.5s">
                <div class="stat-number">6</div>
                <div class="stat-label">常务理事单位</div>
              </div>
              <div class="stat-item card" :class="{'fade-in': isIntroVisible}" style="transition-delay: 0.7s">
                <div class="stat-number">10</div>
                <div class="stat-label">分中心</div>
              </div>
              <div class="stat-item card" :class="{'fade-in': isIntroVisible}" style="transition-delay: 0.9s">
                <div class="stat-number">2</div>
                <div class="stat-label">异地科研机构</div>
              </div>
            </div>
            
            <!-- 功能按钮：宣传册左对齐，了解更多右对齐 -->
            <div class="intro-buttons" :class="{'fade-in': isIntroVisible}" style="transition-delay: 1.1s">
              <el-button class="brochure-btn">实验室宣传册</el-button>
              <el-button class="more-btn" type="primary" @click="$router.push('/about/overview')">
                了解更多 <el-icon class="arrow-right"><ArrowRight /></el-icon>
              </el-button>
            </div>
          </div>
          
          <!-- 右侧图片 -->
          <div class="right-intro">
            <el-carousel 
              ref="imgCarouselRef"
              height="100%" 
              autoplay 
              interval="4000" 
              indicator-position="outside"
              arrow="hover"
              @mouseenter="pauseImgCarousel"
              @mouseleave="startImgCarousel"
            >
              <!-- 轮播图片列表 -->
              <el-carousel-item v-for="(img, idx) in rightImages" :key="idx">
                <div class="img-item" :style="{ backgroundImage: `url(${img})` }"></div>
              </el-carousel-item>
            </el-carousel>
          </div>
        </div>
      </section>
      <!--实验室简介模块结束-->
      
      <!--新闻中心模块开始-->
      <section class="news-section">
        <div class="news-inner">
          <div class="news-header">
            <!-- 统一标题样式：与实验室简介保持一致 -->
            <div class="section-title">
              <div class="title-decoration">          
                <div class="red-bar"></div>
                <div class="decor-icon"></div>
              </div>
              <div class="title-text">
                <router-link to="/news/partyBuilding" class="link-title">
                  <h2>新闻中心</h2>
                  <span class="en-title">NEWS CENTER</span>
                </router-link>
              </div>
            </div>
    
          
          <!-- 新闻分类标签栏（参考图风格） -->
            <div class="news-tabs">
              <el-tabs v-model="activeTab" class="custom-tabs">
                <el-tab-pane label="要闻速递" name="news"></el-tab-pane>
                <el-tab-pane label="党建学习" name="party"></el-tab-pane>
                <el-tab-pane label="科研成果" name="research"></el-tab-pane>
                <el-tab-pane label="通知公告" name="notice"></el-tab-pane>
              </el-tabs>
            </div>
          </div>
    

        <!-- 新闻主体布局：左侧轮播图 + 右侧新闻列表 -->
          <div class="news-content">
            <!-- 左侧新闻轮播 -->
            <div class="news-carousel" :class="{'fade-in': isNewsVisible}" style="transition-delay: 0.1s">
              <el-carousel 
                height="400px" 
                indicator-position="outside"
                arrow="hover"
              >
                <el-carousel-item v-for="(item, idx) in newsCarousel" :key="idx">
                  <div class="news-item" :style="{ backgroundImage: `url(${item.img})` }">
                    <div class="news-overlay">
                      <h3 class="news-title">{{ item.title }}</h3>
                      <p class="news-desc">{{ item.desc }}</p>
                      <span class="news-date">{{ item.date }}</span>
                    </div>
                  </div>
                </el-carousel-item>
              </el-carousel>
            </div>

            <!-- 右侧新闻列表 -->
            <div class="news-list" :class="{'fade-in': isNewsVisible}" style="transition-delay: 0.3s">
              <div class="news-item-card" v-for="(item, idx) in newsList" :key="idx">
                <div class="news-meta">
                  <span class="news-day">{{ item.date.day }}</span>
                  <span class="news-month">{{ item.date.month }}</span>
                </div>
                <router-link to="/news/partyBuilding" class="news-link">
                  <h3 class="news-list-title">{{ item.title }}</h3>
                  <p class="news-list-desc">{{ item.desc }}</p>
                </router-link>
              </div>
            </div>
          </div>
        </div>
      </section>
      

      <!--创新保障模块开始-->
      <section class="innovation-section">
        <!-- 统一标题样式：与实验室简介、研究方向保持一致 -->
        <div class="section-title">
          <div class="title-decoration">          
            <div class="red-bar"></div>
            <div class="decor-icon"></div>
          </div>
          <div class="title-text">
            <router-link to="/innovation/support" class="link-title">
              <h2>创新保障</h2>
              <span class="en-title">INNOVATION SUPPORT</span>
            </router-link>
          </div>
        </div>

        <!-- 机构列表：调整布局与样式 -->
        <div class="innovation-content">
          <ul class="institution-list">
            <!-- 第一个机构卡片 -->
            <li class="institution-card" :class="{'fade-in': isInnovationVisible}" style="transition-delay: 0.1s">
              <router-link 
                to="/ydkyjg/bjdxzqdsjyjy"
                @click="_addDynClicks('wbimage', 1880447799, 72976)">
                <div class="institution-img">
                  <img alt="北京大学重庆大数据研究院" src="../assets/images/zd.jpg">
                  <!-- 新增悬停时显示的图标 -->
                  <div class="hover-icon">
                    <el-icon><ArrowRight /></el-icon>
                  </div>
                </div>
                <div class="institution-info">
                  <h3>北京大学重庆大数据研究院</h3>
                  <p class="institution-desc">专注于大数据技术研发与产业应用的科研机构</p>
                </div>
              </router-link>
            </li>

            <!-- 第二个机构卡片 -->
            <li class="institution-card" :class="{'fade-in': isInnovationVisible}" style="transition-delay: 0.3s">
              <router-link 
                to="/ydkyjg/bjdxzqdsjyjy"
                @click="_addDynClicks('wbimage', 1880447799, 72976)">
                <div class="institution-img">
                  <img alt="北京大学长沙计算与数字经济研究院" src="../assets/images/zd.jpg">
                  <!-- 新增悬停时显示的图标 -->
                  <div class="hover-icon">
                    <el-icon><ArrowRight /></el-icon>
                  </div>
                </div>
                <div class="institution-info">
                  <h3>北京大学长沙计算与数字经济研究院</h3>
                  <p class="institution-desc">聚焦数字经济与计算技术融合创新研究</p>
                </div>
              </router-link>
            </li>
          </ul>
        </div>
      </section>
      <!--创新保障模块结束-->

      <!--研究方向页面-->
      <section class="research-section">
        <!--标题风格一致-->
        <div class="section-title">
          <div class="title-decoration">          
            <div class="red-bar"></div>
            <div class="decor-icon"></div>
          </div>
          <div class="title-text">
            <h2>研究方向</h2>
            <span class="en-title">RESEARCH</span>
          </div>
        </div>
        
        <!-- 三列内容区 -->
        <div class="research-grid">
          <div class="research-card" @mouseenter="hoverCard(0)" @mouseleave="leaveCard(0)" :class="{'active': cardHover[0]}">
            <h3>
              <el-icon class="card-icon"><Briefcase /></el-icon> 
              实验室核心科研团队
            </h3>
            <p>大数据分析与应用技术国家工程实验室组建优秀的科研团队，承接实验室国家级重要科研项目，服务国家和社会的重大需求。</p>
            <a href="kxyj/syshxkytd1.htm" target="_blank" class="more-link">了解更多 ></a>
          </div>
          <div class="research-card" @mouseenter="hoverCard(1)" @mouseleave="leaveCard(1)" :class="{'active': cardHover[1]}">
            <h3>
              <el-icon class="card-icon"><Grid /></el-icon>
              共性技术平台
            </h3>
            <p>共性技术研发平台由数据处理及统计分析中心、机器学习中心、数据管理与分析中心、可视分析中心、知识集成和智能决策中心组成。</p>
            <a href="kxyj/gxjsyfpt.htm" target="_blank" class="more-link">了解更多 ></a>
          </div>
          <div class="research-card" @mouseenter="hoverCard(2)" @mouseleave="leaveCard(2)" :class="{'active': cardHover[2]}">
            <h3>
              <el-icon class="card-icon"><Tools /></el-icon>
              行业应用示范中心
            </h3>
            <p>行业应用示范中心由大数据高性能分析处理中心、智慧交通中心、多媒体大数据分析中心、网信智能中心、大数据分析技术创新中心组成。</p>
            <a href="kxyj/xyyysfzx1.htm" target="_blank" class="more-link">了解更多 ></a>
          </div>
        </div>
      </section>
    <!-- 模块结束 -->
    </main>
    <Footer /> <!--页脚-->
  </div>
</template>



<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import { CaretBottom, ArrowRight, Grid, Tools, Briefcase } from '@element-plus/icons-vue';
import { throttle } from 'lodash'; // 需安装lodash: npm i lodash
import Footer from '@/components/views/Footer.vue';

  /*********** 轮播图及滚动动画控制 **************/
// 首页——轮播控制
const carouselRef = ref(null);
const pauseCarousel = () => {
  carouselRef.value?.pause();
};
const startCarousel = () => {
  carouselRef.value?.play();
};

// 滚动动画控制
const isBannertextVisible = ref(false); // 轮播文字渐入
const isIntroVisible = ref(false);  // 控制数据卡片
const isNewsVisible = ref(false); // 控制新闻中心模块渐入
const isResearchVisible = ref(false); // 控制科学研究页面渐入
const isInnovationVisible = ref(false); // 控制创新保障模块渐入

// 滚动到主体内容（添加节流优化）
const handleScroll = throttle(() => {
  document.querySelector('.main-content')?.scrollIntoView({ behavior: 'smooth' });
}, 300);

// 监听屏幕尺寸变化（预留扩展）
// const isMobile = ref(false);
// const checkScreenSize = () => {
//   isMobile.value = window.innerWidth < 768;
// };

// 右侧轮播图片数据
const rightImages = [
  'https://oss.allintrip.cn/shanwentou/upfiles/onepage/202410211744430256.jpg?x-oss-process=image/quality,q_85/format,jpg',
  'https://oss.allintrip.cn/shanwentou/upfiles/onepage/20240493219698881.jpg?x-oss-process=image/quality,q_85/format,jpg',
  'https://oss.allintrip.cn/shanwentou/upfiles/onepage/20240473832641532.jpg?x-oss-process=image/quality,q_85/format,jpg',
  'https://oss.allintrip.cn/shanwentou/upfiles/onepage/202509127756770983.jpg?x-oss-process=image/quality,q_85/format,jpg'
];

// 右侧轮播控制
const imgCarouselRef = ref(null);
const pauseImgCarousel = () => { imgCarouselRef.value?.pause(); };
const startImgCarousel = () => { imgCarouselRef.value?.play(); };

// 新闻轮播模拟数据
const newsCarousel = ref([
  {
    img: 'https://picsum.photos/800/400?random=1',
    title: '胡俊教授、李若教授当选中国工业与应用数学学会重要职务',
    desc: '2025年10月24日，中国工业与应用数学学会第二十三届年会在湖南长沙隆重开幕...',
    date: '2025-10-27'
  },
  {
    img: 'https://picsum.photos/800/400?random=2',
    title: '2025国产科学计算软件大会即将启幕',
    desc: '深入贯彻我国创新驱动发展战略，加快实现高水平科技自立自强...',
    date: '2025-11-05'
  },
  {
    img: 'https://picsum.photos/800/400?random=3',
    title: '第三届海域态势感知学术研讨会成功举办',
    desc: '聚焦海域态势感知技术创新，推动海洋科技成果产业化...',
    date: '2025-10-20'
  }
]);

// 右侧新闻列表模拟数据
const newsList = ref([
  {
    title: '即将启幕！2025国产科学计算软件大会暨北太天元产品发布会',
    desc: '会议通知为深入贯彻我国创新驱动发展战略，加快实现高水平科技自立自强...',
    date: { day: '05', month: '2025-11' }
  },
  {
    title: '33位院士共同研讨AI for Science——“学术科协”科学智能专家委员会在京成立',
    desc: '聚焦人工智能与科学研究的深度融合，推动科学智能领域的技术突破...',
    date: { day: '31', month: '2025-10' }
  },
  {
    title: '胡俊教授、李若教授分别当选中国工业与应用数学学会会士、副理事长',
    desc: '2025年10月24日，中国工业与应用数学学会第二十三届年会在湖南长沙隆重开幕...',
    date: { day: '27', month: '2025-10' }
  },
  {
    title: '第三届海域态势感知学术研讨会暨溟坤数科产品发布会圆满举行',
    desc: '聚焦海域态势感知技术创新，推动海洋科技成果产业化...',
    date: { day: '20', month: '2025-10' }
  }
]);

// 标签栏激活状态
const activeTab = ref('news');

  /*********** 科学研究模块**************/
const cardHover = ref([false, false, false]);

const hoverCard = (index) => {
      cardHover.value[index] = true;
    };

const leaveCard = (index) => {
      cardHover.value[index] = false;
    };

/*********** 生命周期钩子 **************/
onMounted(() => {
  // 1. 轮播文字渐入
  setTimeout(() => {
    isBannertextVisible.value = true;
  }, 1000);

  // // 2. 屏幕尺寸监听
  // checkScreenSize();
  // window.addEventListener('resize', checkScreenSize);

  // 3. 初始化交叉观察器
  const observer = new IntersectionObserver(
    (entries) => {
      entries.forEach(entry => {
        // 当元素进入视口（即使1%可见），立即显示
        if (entry.isIntersecting) {
          entry.target.classList.add('enter');
          isIntroVisible.value = true;
          // observer.disconnect(); // 只触发一次
          observer.unobserve(entry.target); // 只触发一次,只停止监听这个元素
        }
      });
    },
    { threshold: 0.05,
      rootMargin: '0px 0px -50px 0px' // 提前50px触发，避免动画过晚
     } // 降低阈值，更容易触发
  );

  // 确保元素存在后再观察
  const target = document.querySelector('.intro-section');
  if (target) {
    observer.observe(target);
  } else {
    // 兜底：如果元素未找到，直接显示
    document.querySelector('.intro-section')?.classList.add('enter');
    isIntroVisible.value = true;
  }

  // 新增新闻中心模块的交叉观察器
  const newsObserver = new IntersectionObserver(
    (entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          entry.target.classList.add('enter');
          isNewsVisible.value = true;
          newsObserver.unobserve(entry.target);
        }
      });
    },
    { threshold: 0.05, rootMargin: '0px 0px -50px 0px' }
  );

    // 确保元素存在后再观察
  const newsTarget = document.querySelector('.news-section');
  if (newsTarget) {
    newsObserver.observe(newsTarget);
  } else {
    // 兜底：如果元素未找到，直接显示
    document.querySelector('.news-section')?.classList.add('enter');
    isNewsVisible.value = true;
  }

  // 新增创新保障模块的交叉观察器
  const innovationObserver = new IntersectionObserver(
    (entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          entry.target.classList.add('enter');
          isInnovationVisible.value = true;
          innovationObserver.unobserve(entry.target);
        }
      });
    },
    { threshold: 0.05, rootMargin: '0px 0px -50px 0px' }
  );

  const innovationTarget = document.querySelector('.innovation-section');
  if (innovationTarget) {
    innovationObserver.observe(innovationTarget);
  }

  // 新增研究方向模块的交叉观察器
  const researchObserver = new IntersectionObserver(
    (entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          entry.target.classList.add('enter');
          isResearchVisible.value = true;
          researchObserver.unobserve(entry.target);
        }
      });
    },
    { threshold: 0.05, rootMargin: '0px 0px -50px 0px' }
  );

  const researchTarget = document.querySelector('.research-section');
  if (researchTarget) {
    researchObserver.observe(researchTarget);
  }

});


// onUnmounted(() => {
//   window.removeEventListener('resize', checkScreenSize);
// });
</script>


<style scoped>
/* 全局容器：确保结构层级清晰 */
.app-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
} 

/* 轮播图区域优化 */
.banner {
  position: relative;
  height: 100vh;
  color: #fff;
  overflow: hidden;
}


:deep(.el-carousel) {
  position: absolute; /* 绝对定位填充父容器 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

:deep .el-carousel__container{
  height: 100%;
}

.carousel-item {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center; /* 优化图片居中显示 */
  background-repeat: no-repeat;
}

.banner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 1;
}

.banner-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 2;
  padding: 0 20px;
  max-width: 90%; /* 限制最大宽度，避免超宽 */
  opacity: 0;
  transform: translate(-50%, -45%);
  transition: all 1s cubic-bezier(0.34, 1.56, 0.64, 1); /* 缓动函数增强动感 */
}

.banner-text-enter {
  opacity: 1;
  transform: translate(-50%, -50%);
}

/* 标题自适应字体大小 */
.banner-text h1 {
  font-size: clamp(3rem, 8vw, 4.5rem); /* 3rem-4.5rem间自适应 */
  margin-bottom: 20px;
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6);
  letter-spacing: 4px;
  line-height: 1.2; /* 避免换行时间距过大 */
}

.banner-text p {
  font-size: clamp(1.2rem, 3vw, 1.5rem); /* 1.2rem-1.5rem间自适应 */
  background-color: rgba(255, 107, 107, 0.9);
  padding: clamp(8px, 2vw, 12px) clamp(16px, 5vw, 30px); /* 内边距自适应 */
  border-radius: 4px;
  letter-spacing: 2px;
  display: inline-block; /* 适应内容宽度 */
}

/* 标题动画：字间距变化+轻微放大 */
.title-animation {
  font-size: clamp(3rem, 8vw, 4.5rem);
  margin-bottom: 20px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  letter-spacing: 0;
  font-weight: 700; /* 加粗增强力量感 */
  transition: letter-spacing 1.2s ease, transform 1.2s ease;
}

.banner-text-enter .title-animation {
  letter-spacing: 4px;
  transform: scale(1.05);
} 

/* 副标题动画：背景色扩展 */
.subtitle-animation {
  font-size: clamp(1.2rem, 3vw, 1.5rem);
  background-color: rgba(255, 107, 107, 0); /* 初始透明 */
  padding: clamp(8px, 2vw, 12px) 0; /* 初始无左右padding */
  border-radius: 4px;
  letter-spacing: 2px;
  display: inline-block;
  font-weight: 500;
  transition: all 0.8s ease 0.3s; /* 延迟动画，形成层次感 */
}

.banner-text-enter .subtitle-animation {
  background-color: rgba(255, 107, 107, 0.9);
  padding: clamp(8px, 2vw, 12px) clamp(16px, 5vw, 30px);
}

/* 滚动提示：加入弹跳动画 */
.scroll-down {
  position: absolute;
  bottom: clamp(30px, 5vh, 50px); /* 底部距离自适应 */
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 2;
  cursor: pointer;
  opacity: 0.9;
  transition: opacity 0.3s;
}

.scroll-down:hover {
  opacity: 1;
}

.scroll-icon {
  font-size: clamp(28px, 5vw, 36px); /* 图标大小自适应 */
  margin-bottom: 8px;
}

/* 弹跳动画：上下浮动 */
.bounce-animation {
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-10px); }
  60% { transform: translateY(-5px); }
}

.scroll-text {
  font-size: 14px;
  letter-spacing: 2px;
  text-transform: uppercase; /* 大写字母增强设计感 */
}

/********** 实验室部分 ***********/
/* 主体内容自适应 */
.main-content {

  padding: 80px clamp(20px, 5vw, 80px); /* 增加上下内边距，提升呼吸感 */
  background-image: 
    radial-gradient(rgba(195, 47, 47, 0.02) 1px, transparent 1px),
    radial-gradient(rgba(195, 47, 47, 0.02) 1px, transparent 1px);
  background-size: 50px 50px; /* 增大纹理间距，避免杂乱 */
  background-position: 0 0, 25px 25px;
  /* 顶部添加红色分割线，区分轮播区与内容区 */
  border-top: 3px solid #c32f2f;
}

.intro-section {
  background-image: 
    radial-gradient(rgba(195, 47, 47, 0.03) 1px, transparent 1px),
    radial-gradient(rgba(196, 31, 31, 0.03) 1px, transparent 1px);
  padding: 80px 60px; /* 增加内边距，让内容更居中 */
  border-radius: 12px; /* 轻微圆角，柔和边缘 */

  opacity: 0;
  transform: translateY(50px);
  transition: opacity 1s ease-out, transform 1s ease-out;
  /* 确保动画期间不被其他元素遮挡 */
  position: relative;
  z-index: 10;
}

/* 去掉标题链接的下划线和默认颜色 */
.link-title {
  text-decoration: none; /* 去掉下划线 */
  color: inherit; /* 继承父元素颜色 */
  display: inline-flex;
  flex-direction: column; /* 垂直排列中英文 */
  gap: 5px;
}

/* 鼠标悬停时微动或变色，可选 */
.link-title:hover h2 {
  color: #c32f2f; /* 红色主题呼应 */
  transition: color 0.3s ease;
}


/* 触发动画后的状态 */
.intro-section.enter {
  opacity: 1;
  transform: translateY(0);
}

/* 修改初始状态 */
.intro-text, .stat-item.card, .intro-buttons {
  opacity: 0; /* 初始透明 */
  transform: translateY(20px); /* 初始向下偏移 */
  transition: opacity 0.6s ease, transform 0.6s ease;
}
/* 触发动画时显示 */
.fade-in {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* 标题样式：红色竖条装饰 */
.section-title {
  margin-bottom: 60px;
  position: relative;
  display: flex;
  font-weight: bold;
  align-items: center;
  gap: 15px;
  align-items: center;

  opacity: 0; /* 初始透明 */
  transform: translateY(20px);
  transition: opacity 0.8s ease-out 0.1s, transform 0.8s ease-out 0.1s;

}

.intro-section.enter .section-title {
  opacity: 1;
  transform: translateY(0);
}

/* 文字容器：内部垂直排列中文和英文标题 */
.title-text {
  display: flex;
  flex-direction: column; /* 垂直排列 */
  gap: 5px; /* 中文与英文的间距 */
}

/* 中文标题：去除底部margin，避免多余间距 */
.section-title h2 {
  font-family: var(--font-title);
  font-size: 36px;
  color: #333;
  margin: 0; 
  font-weight: 900;
  line-height: 1.2; /* 控制文字行高，避免隐性间距 */
}

.title-decoration {
  display: flex;
  align-items: center;
  /* margin-bottom: 15px; */
}

/* 英文副标题：调整位置，确保在中文正下方 */
.en-title {
  font-family: var(--font-en);
  font-size: 14px;
  color: #999;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0; /* 清除默认margin */
  /*增加左侧缩进，与中文左对齐 */
  padding-left: 2px;
}

.red-bar {
  width: 30px;
  height: 80px;
  background-color: #9b0707;
  margin-right: 10px;
}

.decor-icon {
  width: 30px;
  height: 80px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 20'%3E%3Cpath fill='%23E5C185' d='M0,0h10v20H0z'/%3E%3Cpath fill='%23E5C185' d='M30,0h10v20H30z'/%3E%3Cpath fill='%23E5C185' d='M15,5h10v10H15z'/%3E%3C/svg%3E") no-repeat center;
  background-size: contain;
}

/* 左右布局：大屏左右分布，小屏上下堆叠 */
.intro-content {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  align-items: center;
  margin-top: 20px;
}

.left-intro {
  font-family: var(--font-body);
  flex: 1;
  min-width: 300px;
  color: #555;
  line-height: 1.8;
  font-size: clamp(15px, 2vw, 16px);
}

.left-intro p {
  margin-bottom: 20px;
  text-align: justify;
  line-height: 1.8;
  letter-spacing: 0.5px;
  text-indent: 2em;
}

/* 右侧轮播容器样式 */
.right-intro {
  flex: 1;
  min-width: 300px;
  height: 0; /* 改为相对高度（基于宽度的百分比），适配图片原始比例（如4:3） */
  padding-bottom: 25%;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  position: relative;
  /* 3D 容器准备 */
  perspective: 1000px;

  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease-out 0.3s, transform 0.8s ease-out 0.3s;
}

.intro-section.enter .right-intro {
  opacity: 1;
  transform: translateY(0);
}

.intro-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.right-intro:hover .intro-img {
  transform: scale(1.03);
}

/* 轮播图片样式 */
.img-item {
  width: 100%;
  height: 100%;
  background-size: cover;
  /* 根据图片主体位置调整（示例：主体在上半部分，向上偏移10%） */
  background-position: center 10%;
  transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 3D 轮播动画 */
:deep(.el-carousel__item) {
  transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-style: preserve-3d;
}
/* 非活跃项的 3D 变换 */
:deep(.el-carousel__item:not(.is-active)) {
  transform: rotateY(15deg) scale(0.9);
  opacity: 0.6;
  filter: brightness(0.8);
}
/* 活跃项突出显示 */
:deep(.el-carousel__item.is-active) {
  transform: rotateY(0) scale(1);
  z-index: 2;
}

/* 指示器样式优化（与主题色呼应） */
:deep(.el-carousel__indicators--outside) {
  bottom: -30px;
}
:deep(.el-carousel__indicator) {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #ddd;
  margin: 0 6px;
}
:deep(.el-carousel__indicator.is-active) {
  background-color: #c32f2f;
  width: 30px;
  border-radius: 5px;
  transition: all 0.3s;
}

/* 箭头按钮美化 */
:deep(.el-carousel__arrow) {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.8);
  color: #c32f2f;
  opacity: 0;
  transition: all 0.3s;
}
.right-intro:hover :deep(.el-carousel__arrow) {
  opacity: 1;
}
:deep(.el-carousel__arrow--left) {
  left: 10px;
}
:deep(.el-carousel__arrow--right) {
  right: 10px;
}
:deep(.el-carousel__arrow:hover) {
  background-color: #fff;
  transform: scale(1.1);
}


/* 确保即使动画未触发，元素也能显示（兜底） */
/* @media (max-width: 10000px) {
  .stat-item.card, .intro-text, .intro-buttons {
    opacity: 1 !important;
    transform: translateY(0) !important;
  }
} */

/* 数据统计模块样式：突出数字 */
.stats-row {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  margin: 30px 0;
  justify-content: space-between;
}


.stat-item.card {
  background-color: #fdf2f2; /* 红色系浅背景，与主题呼应 */
  border-radius: 8px;
  padding: 20px 15px;
  box-shadow: 0 4px 12px rgba(195, 47, 47, 0.08);
  transition: all 0.3s ease;
}
.stat-item.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(195, 47, 47, 0.15);
}
.stat-number {
  font-family: var(--font-title);
  font-size: 36px;
  color: #c32f2f;
  font-weight: 700;
  margin-bottom: 5px;
  line-height: 1; /* 避免数字上下间距过大 */
}
.stat-label {
  font-family: var(--font-body);
  font-size: 15px;
  color: #666;
  letter-spacing: 0.5px;
}

/* 功能按钮样式：参考图红色风格 */
.intro-buttons {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 30px;
}

.brochure-btn {
  background-color: #c32f2f;
  border-color: #c32f2f;
  color: #fff;
  padding: 8px 20px;
  font-size: 15px;
  transition: all 0.3s;
}

.brochure-btn:hover {
  background-color: #a52828;
  border-color: #a52828;
}

.more-btn {
  background-color: #c32f2f;
  border-color: #c32f2f;
  padding: 8px 20px;
  font-size: 15px;
  transition: all 0.3s;
  border-radius: 20px; /* 圆形按钮样式 */
}

.more-btn:hover {
  background-color: #a52828;
  border-color: #a52828;
  transform: translateY(-2px);
}

.arrow-right {
  margin-left: 5px;
  font-size: 14px;
}

/* 新闻中心模块部分 */
.news-section {
  /* 调整背景为更接近报纸的纹理组合 */
  background-color: #f8f5f0;
/* 多层纹理叠加：主褶皱+次级折痕+纸张纤维+立体阴影 */
  background-image: 
    /* 主褶皱1：左上角折叠阴影 */
    radial-gradient(circle at 10% 10%, rgba(0,0,0,0.05) 0%, transparent 30%),
    /* 主褶皱2：右下角折叠阴影 */
    radial-gradient(circle at 90% 90%, rgba(0,0,0,0.05) 0%, transparent 30%),
    /* 次级折痕：横向细微折痕 */
    linear-gradient(to bottom, 
      transparent 0%, 
      rgba(0,0,0,0.03) 0.5%, 
      transparent 1%, 
      transparent 98%, 
      rgba(0,0,0,0.03) 98.5%, 
      transparent 99%
    ),
    /* 纸张纤维纹理：极细微的噪点 */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23noise)' opacity='0.08'/%3E%3C/svg%3E");
  

  background-size: 
    100% 100%,  /* 主褶皱 */
    100% 100%,  /* 次级褶皱 */
    100% 40px,  /* 横向折痕（每40px一条） */
    200px 200px; /* 纤维纹理 */
    

  /* background-position: 0 0, 20px 20px; */
  padding: 80px 60px;
  border-radius: 12px;
  margin-top: 60px;
  position: relative;
  z-index: 10;
  /* 轻微凸起效果，增强纸张立体感 */
  box-shadow: 
    0 1px 2px rgba(0,0,0,0.05),
    inset 0 0 50px rgba(255,255,255,0.7);

  opacity: 0;
  transform: translateY(50px);
  transition: opacity 1s ease-out, transform 1s ease-out;
}

/* 内容容器（包裹标题+标签和新闻列表），统一横向约束 */
.news-inner {
  max-width: 1200px; /* 根据设计稿调整最大宽度，与新闻列表一致 */
  margin: 0 auto; /* 居中对齐 */
  width: 100%; /* 占满可用宽度 */
}

/* 标题与标签的父容器，使用Flex横向排列 */
.news-header {
  display: flex;
  align-items: center; /* 垂直居中对齐 */
  justify-content: space-between; /* 标题居左，标签居右 */
  gap: 50px; /* 标题与标签的间距 */
  margin-bottom: 40px; /* 整体与下方内容的间距 */
  flex-wrap: wrap; /* 小屏幕自动换行 */
}

/* 调整标题容器样式：取消底部margin，避免多余间距 */
.news-section .section-title {
  margin-bottom: 0;
  flex: 1; /* 标题区域自适应宽度 */
  min-width: 200px; /* 小屏幕最小宽度，避免挤压 */
}


/* 左上角报纸折叠装饰 */
.news-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 120px;
  height: 120px;
  /* 折叠效果：三角形阴影 */
  background: linear-gradient(135deg, transparent 50%, rgba(0,0,0,0.03) 50%);
  z-index: 0;
}

/* 右下角新闻图标装饰（简化报纸图案） */
.news-section::after {
  content: '';
  position: absolute;
  bottom: 30px;
  right: 30px;
  width: 60px;
  height: 60px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Crect x='5' y='5' width='30' height='10' fill='rgba(195,47,47,0.05)'/%3E%3Crect x='5' y='20' width='30' height='5' fill='rgba(195,47,47,0.05)'/%3E%3Crect x='5' y='28' width='20' height='5' fill='rgba(195,47,47,0.05)'/%3E%3C/svg%3E");
  z-index: 0;
}



.news-section.enter {
  opacity: 1;
  transform: translateY(0);
}

.news-section .section-title {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease-out 0.1s, transform 0.8s ease-out 0.1s;
  /* 确保标题在最上层，不被卡片遮挡 */
  position: relative;
  z-index: 20;
}

.news-section.enter .section-title{
  opacity: 1;
  transform: translateY(0);
}

.news-section.enter .news-content,
.news-section.enter .news-tabs {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* 新闻分类标签栏 */
.news-tabs {
  width: auto; /* 自适应宽度 */
  margin: 0;
  border-bottom: 1px solid rgba(195, 47, 47, 0.2); 
  flex: 1; 
  min-width: 300px; /* 确保标签不被过度挤压 */
  padding: 0;
}

/* 标签项间距和大小微调，适应横向布局 */
:deep(.custom-tabs .el-tabs__nav) {
  gap: 20px; /* 标签间距适当减小 */
  justify-content: flex-end; /* 标签靠右对齐（与标题呼应） */
  
}

:deep(.custom-tabs .el-tabs__item) {
  font-size: 17px;
  padding: 6px 0;
  font-family: var(--font-body); 
}

/* 标签激活状态优化 */
:deep(.custom-tabs .el-tabs__item.is-active) {
  color: #c32f2f;
  border-bottom: 3px solid #c32f2f;
  margin-bottom: -1px; /* 与底部边框精准对齐 */
}
/* 标签悬停效果 */
:deep(.custom-tabs .el-tabs__item:hover:not(.is-active)) {
  color: #c32f2f;
  border-bottom: 3px solid transparent; /* 悬停时显示透明边框占位 */
}

/* 新闻主体布局：左轮播 + 右列表 */
.news-content {
  width: 100%; /* 占满可用宽度 */
  display: flex;
  gap: 50px;
  flex-wrap: wrap; /* 小屏幕自动换行 */
}

/* 轮播图容器：添加报纸裁剪效果 */
.news-carousel {
  flex: 1; 
  border: 1px solid rgba(195, 47, 47, 0.1);
  border-radius: 2px; /* 方角更贴合报纸风格 */
  box-shadow: 3px 3px 0 rgba(195, 47, 47, 0.05); /* 偏移阴影模拟纸张堆叠 */
}

.news-carousel, .news-list {
  flex: 1;
  min-width: 300px;
  width: 100%;
}

/* 左侧新闻轮播样式 */
:deep(.news-item) {
  width: 100%;
  height: 400px;
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
}
.news-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 20px;
  background: linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0.2));
  color: #fff;
}
.news-title {
  font-size: 24px;
  margin-bottom: 10px;
}
.news-desc {
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 10px;
  opacity: 0.9;
}
.news-date {
  font-size: 12px;
  opacity: 0.8;
}

/* 右侧新闻列表样式 */
.news-item-card {
  display: flex;
  gap: 15px;
  padding: 15px 0;
  border-bottom: 1px solid #eee;
  transition: all 0.3s;

  border-bottom: 1px dashed rgba(195, 47, 47, 0.1); /* 虚线分隔，区别于其他模块实线 */
}
.news-item-card:hover {
  background-color: #fdf9f9;
  transform: translateX(5px);
}
.news-meta {
  width: 60px;
  height: 60px;
  background-color: #c32f2f;
  color: #fff;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}
.news-day {
  font-size: 24px;
  line-height: 1;
}
.news-month {
  font-size: 12px;
  opacity: 0.8;
}
.news-link {
  flex: 1;
  text-decoration: none;
}
.news-list-title {
  font-size: 18px;
  color: #333;
  margin-bottom: 8px;
  transition: color 0.3s;
}
.news-link:hover .news-list-title {
  color: #c32f2f;
}
.news-list-desc {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
}



/* 科学研究部分 */
.research-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-top: 40px;
}

.research-section {
  background-image: 
    radial-gradient(rgba(195, 47, 47, 0.03) 5px, transparent 1px),
    radial-gradient(rgba(195, 47, 47, 0.03) 5px, transparent 1px);

  background-repeat: repeat;
  background-attachment: local;  /* 修复滚动时背景跳动问题 */
  background-size: 40px 40px;
  background-position: 0 0, 20px 20px;

  width: 100%;
  box-sizing: border-box; /* 确保内边距不影响宽度计算 */
  padding: 80px 60px;
  border-radius: 12px;
  margin-top: 60px; /* 与上一模块保持间距 */
  
}

/* 科学研究模块标题基础样式 */
.research-section .section-title {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease-out 0.1s, transform 0.8s ease-out 0.1s;
  /* 确保标题在最上层，不被卡片遮挡 */
  position: relative;
  z-index: 20;
}

/* 科学研究模块标题动画激活状态 */
.research-section.enter .section-title {
  opacity: 1 !important; /* 强制显示标题 */
  transform: translateY(0) !important; /* 取消初始偏移 */
}

/* 研究卡片初始状态（与关于我们的卡片动画一致） */
.research-card {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); /* 使用缓动函数增强动画效果 */
  border: 1px solid #eee;
  border-radius: 8px;
  background: linear-gradient(145deg, #fff 0%, #fdf9f9 100%); /* 浅红渐变背景 */
  position: relative; 
  overflow: hidden; /* 允许伪元素显示 */

  box-shadow: 0 4px 12px rgba(195, 47, 47, 0.08);
  padding: 30px 25px;
  cursor: pointer;
}

.research-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 3px;
  background-color: #c32f2f;
  transition: width 0.3s ease;
}
.research-card:hover::after {
  width: 100%;
}


/* 滚动入场时触发渐入动画 */
.research-section.enter .research-card {
  opacity: 1;
  transform: translateY(0);
}

/* 卡片按顺序延迟显示（增强层次感） */
.research-section.enter .research-card:nth-child(1) { transition-delay: 0.1s; }
.research-section.enter .research-card:nth-child(2) { transition-delay: 0.3s; }
.research-section.enter .research-card:nth-child(3) { transition-delay: 0.5s; }


/* 悬停变色效果 */
.research-card:hover,
.research-card.active {
  background-color: #fdf2f2;
  box-shadow: 0 8px 20px rgba(195, 47, 47, 0.18);
  transform: translateY(-8px) scale(1.05); /* 轻微放大，增强交互感 */
  border-color: #c32f2f;
  
}

/* 卡片标题样式 */
.research-card h3 {
  font-family: var(--font-title);
  font-size: 25px;
  color: #333;
  margin-bottom: 15px;
  position: relative;
  padding-left: 8px;

  line-height: 0.4; /* 控制标题行高，避免隐性间距 */
  display: inline-flex;
  align-items: center; /* 图标与文字垂直居中 */
}


.card-icon {
  margin-right: 10px; /* 图标与文字间距 */
  color: #c32f2f; /* 图标颜色与主题呼应 */
  font-size: 40px; /* 图标大小与标题匹配 */
}

/* 卡片文字样式 */
.research-card p {
  font-family: var(--font-body);
  color: #555;
  line-height: 1.8;
  margin-bottom: 20px;
  text-align: justify;
}

/* 链接样式 */
.more-link {
  color: #c32f2f;
  text-decoration: none;
  font-size: 14px;
  transition: all 0.3s;

  display: block; /* 占满整行，增加点击区域 */
  text-align: right; /* 右对齐 */
}

.more-link:hover {
  color: #a52828;
  padding-left: 5px;
}



/************ 创新保障模块样式 ************/
.innovation-section {
    /* 淡灰色主背景 + 细腻纹理，与其他模块的红色系形成区分 */
  background-color: #f5f5f5;
  background-image: 
    linear-gradient(rgba(255,255,255,0.8) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.8) 1px, transparent 1px);
  background-size: 20px 20px; /* 网格纹理密度 */
  padding: 80px 60px;
  border-radius: 12px;
  margin-top: 60px; /* 与上一模块保持一致间距 */
  position: relative;
  z-index: 10;

  /* 增加模块边缘阴影，强化与其他区域的分隔感 */
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);

  /* 初始动画状态：与其他模块一致 */
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 1s ease-out, transform 1s ease-out;
}

/* 进入视口后的动画状态 */
.innovation-section.enter {
  opacity: 1;
  transform: translateY(0);
}
/* 创新保障模块标题样式 */
.innovation-section .section-title {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease-out 0.1s, transform 0.8s ease-out 0.1s;
  /* 确保标题在最上层，不被卡片遮挡 */
  position: relative;
  z-index: 20;
}

.innovation-section.enter .section-title {
  opacity: 1;
  transform: translateY(0);
}

/* 内容区布局 */
.innovation-content {
  margin-top: 40px;
}

/* 机构列表：使用flex布局，与研究方向模块的grid呼应 */
.institution-list {
  display: flex;
  gap: 30px;
  flex-wrap: wrap; /* 支持响应式换行 */
  justify-content: center; /* 居中对齐 */
  padding: 0;
  margin: 0;
  list-style: none;
}

/* 机构卡片：全新差异化设计 */
.institution-card {
  flex: 1;
  min-width: 300px;
  max-width: 500px;
  border-radius: 8px;
  overflow: hidden;
  background-color: #fff;
  box-shadow: 0 6px 15px rgba(0,0,0,0.05);
  transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  
  /* 独特的入场动画：缩放+淡入 */
  opacity: 0;
  transform: scale(0.9);
}

/* 入场动画激活 */
.institution-card.fade-in {
  opacity: 1;
  transform: scale(1);
  animation: cardPop 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* 移除 router-link 自带的链接下划线 */
:deep(.institution-card a) {
  text-decoration: none ; /* 移除链接默认下划线 */
}

/* 卡片弹出动画 */
@keyframes cardPop {
  0% { transform: scale(0.9); opacity: 0; }
  70% { transform: scale(1.05); }
  100% { transform: scale(1); opacity: 1; }
}

/* 悬停效果：旋转+提升阴影+边框发光 */
.institution-card:hover {
  transform: rotate(1deg) translateY(-8px);
  box-shadow: 0 15px 30px rgba(195, 47, 47, 0.15);
  border: 1px solid rgba(195, 47, 47, 0.2);
}

/* 图片容器样式 */
.institution-img {
  width: 100%;
  height: 280px; /* 固定高度，保持一致性 */
  overflow: hidden;
  position: relative;
}

.institution-img img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 确保图片填充容器且不变形 */
  transition: transform 0.8s ease; /* 平滑缩放 */
}

/* 悬停时图片恢复彩色并轻微放大 */
.institution-card:hover .institution-img img {
  transform: scale(1.1); /* 更大幅度的缩放 */
}

/* 新增加悬停图标 */
.hover-icon {
  position: absolute;
  top: 50%;
  right: -40px;
  transform: translateY(-50%);
  width: 60px;
  height: 60px;
  background-color: #c32f2f;
  color: white;
  border-radius: 50%;
  display: flex; 
  align-items: center;
  justify-content: center;
  font-size: 20px;
  box-shadow: 0 4px 12px rgba(195, 47, 47, 0.3);
  transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  opacity: 0;
}

.institution-card:hover .hover-icon {
  right: 20px;
  opacity: 1;
}

/* 机构信息区域 */
.institution-info {
  padding: 25px;
  text-align: center;
  background-color: #fff;
  position: relative;
  transition: all 0.5s ease;
}

/* 信息卡底部部装饰线 */
.institution-info::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, transparent, #c32f2f, transparent);
  transform: scaleX(0);
  transition: transform 0.5s ease;
}

.institution-card:hover .institution-info::after {
  transform: scaleX(1);
}

.innovation-section .section-title h2 {
    font-size: 36px;
    color: #333;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* 标题样式 */
.institution-info h3 {
  font-size: 20px;
  color: #333;
  margin: 0 0 10px 0;
  font-weight: 600;
  transition: all 0.4s ease;
  text-decoration: none;
}


.institution-card:hover .institution-info h3 {
  color: #c32f2f;
  transform: translateY(-5px);
}

/* 描述文字样式 */
.institution-desc {
  font-size: 14px;
  color: #666;
  margin: 0;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.5s ease 0.1s;
}

.institution-card:hover .institution-desc {
  opacity: 1;
  transform: translateY(0);
}

.institution-card:hover .institution-info {
  background: linear-gradient(180deg, #fcebeb 0%, #fdf2f2 100%);
}

/* 响应式：小屏上下堆叠 */
@media (max-width: 768px) {
  .banner {
    height: 80vh;
  }
  .carousel-item {
    background-position: 50% 30%;
  }
  .intro-content { flex-direction: column; }
  .stats-row { justify-content: center; }
  .intro-buttons {
    flex-direction: column;
    gap: 15px;
    align-items: flex-start;
  }
  .right-intro {
    height: 350px; /* 小屏缩短高度 */
    padding-bottom: 80%; /* 小屏更高比例，避免过宽 */
  }

  .img-item {
    background-position: center 5%; /* 小屏聚焦上半部分 */
  }

  .research-grid {
    grid-template-columns: 1fr; /* 单列布局 */
    gap: 30px;
  }

  /* 小屏关闭 3D 效果，避免变形 */
  :deep(.el-carousel__item:not(.is-active)) {
    transform: none;
    opacity: 1;
    filter: none;
  }
  
  .institution-list {
    flex-direction: column;
    align-items: center;
    gap: 30px;
  }
  
  .institution-card {
    width: 100%;
    max-width: none;
  }
  
  .institution-img {
    height: 220px;
  }
  
  .institution-card:hover {
    transform: rotate(0) translateY(-5px);
  }

  .news-content {
    flex-direction: column;
  }
  :deep(.news-item) {
    height: 300px;
  }
}
</style>
